<template>
  <div class="quality-system-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="swiper-container">
        <e-swiper :data="swiperData" :options="swiperOptions"></e-swiper>
      </div>
      <div class="table-container">
        <div class="search-container">
          <div class="search-content">
            <div class="search-item">
              <label>内容搜索：</label>
              <el-input
                placeholder="名称模糊查询"
                v-model="dataName"
                @blur="handleSearch"
                @keydown.native.enter="handleSearch">
              </el-input>
            </div>
            <div class="search-item">
              <label>日期搜索：</label>
              <el-date-picker
                v-model="searchDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="handleSearch">
              </el-date-picker>
            </div>
            <el-button type="primary" @click="handleSearch">
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary" @click="handleRefresh">
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="search-btn">
            <el-button v-if="hasTabUpload" type="primary" @click="visible = true">资料上传</el-button>
          </div>
        </div>
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="dataName" label="体系文件"></el-table-column>
          <el-table-column prop="dataDesc" label="体系简介"></el-table-column>
          <el-table-column prop="dataImagesUrl" label="体系概述图片">
            <template slot-scope="scope">
              <img :src="$checkUrl(scope.row.dataImagesUrl)" class="small-img" />
            </template>
          </el-table-column>
          <el-table-column label="发起时间">
            <template slot-scope="scope">
              <span>
                {{ scope.row.createTime | dateConversion }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="整改时间">
            <template slot-scope="scope">
              <span>
                {{ scope.row.modifyTime | dateConversion }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span v-if="hasTableDetail" class="btn" @click="handleLookFile(scope.row)">查看体系图</span>
              <span v-if="hasTableDownLoad" class="btn" @click="handleDownload(scope.row)">下载体系文件</span>
              <span v-if="hasTableDel" class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <upload-modal
        :visible="visible"
        @cancel="visible = false"
        @submit="handleSubmit"
      >
      </upload-modal>
    </main>
  </div>
</template>

<script>
import eSwiper from '@/components/public/Swiper';
import Breadcrumb from '@/components/public/Breadcrumb';
import uploadModal from '@/components/project/quality/uploadModal';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '质量管理',
        },
        {
          name: '质量管理体系'
        }
      ],
      dataName: '',
      searchDate: '',
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      swiperData: [],
      swiperOptions: {
        autoplay: false,
        loop: false,
        effect : 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
        coverflowEffect: {
          rotate: 0,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows : true
        },
      },
      visible: false
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getTableData();
    this.getTableData(false);
  },
  components: {
    eSwiper,
    Breadcrumb,
    uploadModal
  },
  methods: {
    /**
     * 搜索
     */
    handleSearch() {
      this.getTableData();
    },
    handleRefresh() {
      this.clear();
      this.dataName = '';
      this.searchDate = '';
      this.getTableData();
    },
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 查看体系图
    handleLookFile(row) {
      window.open(this.$checkUrl(row.dataImagesUrl));
    },
    // 下载体系文件
    handleDownload(row) {
      window.location.href = this.$checkUrl(row.dataFileUrl);
    },
    // 删除文件
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteQualityFile({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
          this.getTableData(false);
        }
      });
    },
    // 提交资料
    async handleSubmit(params) {
      if (!params) return;
      const { success } = await this.$Model.addQualityFile({
        ...params,
        projectType: '1', // 1质量；2：安全
        projectId: this.projectId
      });
      if (success) {
        this.$message.success('保存成功');
        this.visible = false;
        this.getTableData();
        this.getTableData(false);
      }
    },
    /**
     * 获取列表数据
     * @param pageFlag {Boolean} 是否分页
     */
    async getTableData(pageFlag = true) {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId,
        projectType: '1', // 1质量；2：安全
        dataName: this.dataName,
        searchDate: this.searchDate,
        pageFlag
      };
      const { success, data: { data }} = await this.$Model.getQualitySystemList(params);
      this.tableLoading = false;
      if (success && Array.isArray(data.list)) {
        if (!pageFlag) {
          this.swiperData = data.list.map(item => ({
            image: this.$checkUrl(item.dataImagesUrl)
          }));
          return;
        }
        this.tableData = data.list;
        this.total = data.total || 0;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";

  .quality-system-page {
    width: 100%;
    height: 100%;
    main {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $baseBg;
      padding: 20px;
      .swiper-container {
        width: 100%;
        height: 50%;
      }
      .table-container {
        width: 100%;
        height: 50%;
        background-color: $mainBg;
        padding: 10px 20px;
        margin-top: 20px;
        overflow: hidden;
        border-radius: 15px;
        .search-container {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          .search-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .search-item {
            width: 400px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            label {
              font-size: 14px;
            }
            /deep/ .el-input {
              width: 300px;
            }
          }
        }
        .table-content {
          width: 100%;
          height: calc(100% - 100px);
          /deep/ .el-table__body-wrapper {
            height: 100%;
            padding-bottom: 46px;
            overflow-y: auto;
          }
          /deep/ .img {
            width: 100px;
            height: 60px;
          }
          .iconfont {
            cursor: pointer;
          }
          .small-img {
            width: 100px;
            height: 60px;
          }
          .btn {
            cursor: pointer;
            color: $mainColor;
            margin-right: 8px;
          }
        }
      }
    }
  }
</style>
